<template>
    <div class="gocome">
        <h1>出入行程报备</h1>
        <div class="gcForm">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-width="150px" 
                class="demo-ruleForm">
                <el-form-item label="姓名" prop="name" readonly>
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="小区住址" prop="address">
                    <el-input v-model="ruleForm.address"></el-input>
                </el-form-item>
                <el-form-item label="目的地" prop="region">
                    <el-cascader size="large" :options="options" v-model="ruleForm.selectedOptions" @change="handleChange" />
                </el-form-item>
                <el-form-item label="出行时间" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                                style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="date2">
                            <el-time-picker placeholder="选择时间" v-model="ruleForm.date2"
                                style="width: 100%;" value-format="HH:mm:ss"></el-time-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
export default {
    data() {
        return {
            options: regionData,
            selectedOptions: [],
            ruleForm: {
                name: '',
                address: '',
                phone: '',
                selectedOptions: 'selectedOptions',
                region:'',
                date1: '',
                date2: '',
                type: [],
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入小区住址', trigger: 'blur' },
                    { min: 6, max: 14, message: '长度在 6 到 14 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度为11个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择目的地', trigger: 'change' }
                ],
                date1: [
                    { type: 'string', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'string', required: true, message: '请选择时间', trigger: 'change' }
                ]
            }
        }
    },
    created() {
        this.ruleForm = JSON.parse(this.$route.query.Glist ? this.$route.query.Glist : '{}')
        console.log(this.ruleForm.name);
    },
    methods: {
        handleChange() {
            var loc = ''
            for (let i = 0; i < this.ruleForm.selectedOptions.length; i++) {
                loc += CodeToText[this.ruleForm.selectedOptions[i]] 
            }
            console.log(loc)// 输出区域码所对应的属性值即中文地址
            this.ruleForm.region = loc;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                    console.log(this.ruleForm);
                    this.$router.push({
                        path:'/index/user/recordg',
                        query:{
                            getG: JSON.stringify(this.ruleForm)
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    }

}
</script>

<style scoped>
.gocome h1 {
    margin: 20px 50px 30px 0;
}
.gocome .gcForm{
    margin: 0 auto;
    padding-right: 50px;
    width: 500px;
}
.gocome .gcForm /deep/.el-form-item__label{
    font-size: 18px;
}
.gocome .gcForm /deep/.el-form-item__label::after{
    content: "：";
    font-weight: bold;
}
</style>